<template>
    <div class="imgBox">
        <div @click="openImg" class="imgInfo">
            <img :src="url" alt="">
        </div>
        <div class="demo-image__preview">
            <el-image-viewer  v-if="showViewer" :on-close="closeViewer" :url-list="[url]" />
        </div>
    </div>

</template>

<script>
export default {
    name: 'BeeTokenSystemH5ImgShow',
    components: {
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
    },
    data() {
        return {
            srcList:[],
            url:'',
            showViewer: true, // 显示查看器
        };
    },
    created () {
        this.url = this.$route.query.url
        this.srcList[0] = this.$route.query.url
    },
    mounted() {
        
    },

    methods: {
        closeViewer(){
            this.showViewer = false
        },
        openImg(){
           this.showViewer = true
        }
    },
};
</script>

<style lang="scss" scoped>
    .imgBox{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding-top: 100px;
        box-sizing: border-box;
    }
    .imgInfo{
        width: 600px;
        height: 600px;
        cursor: pointer;
    }
    .imgInfo img{
        width: 100%;
        height: 100%;
        object-fit: contain;
    }


</style>